import React from 'react';
import { Button, Card, Form, Input, Layout, Typography } from 'antd';
import { LockOutlined, PhoneOutlined, UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import useAdminInfoStore from '@/store/useAdminInfo';
import { loginAdminApi } from '@/api/adminApi';
import useApp from 'antd/es/app/useApp';

const { Title } = Typography;
const { Content } = Layout;

interface LoginFormValues {
  phone: string;
  password: string;
}

const Login: React.FC = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const app = useApp();
  // 这里假设有一个设置管理员信息的方法
  // 实际使用中应该根据实际的store实现来调整
  const { setAdminInfo, setToken } = useAdminInfoStore();

  const onFinish = async (values: LoginFormValues) => {
    try {
      // 这里应该调用实际的登录API
      const res = await loginAdminApi(values);
      console.log(res);
      // 模拟登录成功
      app.message.success('登录成功');

      // 设置管理员信息并跳转到管理页面
      // 这里假设登录成功后会返回管理员信息
      setAdminInfo(res.data.adminInfo);
      setToken(res.data.token);

      // 登录成功后跳转
      setTimeout(() => {
        navigate('/admin/home');
      }, 1000);
    } catch (error) {
      app.message.error('登录失败，请检查手机号和密码');
      console.error('登录出错:', error);
    }
  };

  return (
    <Layout className="w-[100vw] h-[100vh] bg-gradient-to-r from-purple-100 to-blue-100">
      <Content className="flex items-center justify-center p-4">
        <Card
          className="w-full max-w-md shadow-xl"
          style={{ borderRadius: '12px' }}
        >
          <div className="text-center mb-8">
            <UserOutlined
              className="text-5xl text-purple-500 mb-4"
              style={{ fontSize: '64px' }}
            />
            <Title
              level={2}
              className="mb-0 text-gray-800"
            >
              中国传统节日课堂后台管理系统
            </Title>
            <p className="text-gray-500 mt-2">请使用您的管理员账号和密码登录系统</p>
          </div>

          <Form
            form={form}
            name="admin_login"
            layout="vertical"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            autoComplete="off"
            size="large"
          >
            <Form.Item
              name="phone"
              rules={[
                { required: true, message: '请输入手机号' },
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '请输入有效的手机号码',
                },
              ]}
            >
              <Input
                prefix={<PhoneOutlined className="text-gray-400" />}
                placeholder="请输入手机号"
                className="rounded-lg"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password
                prefix={<LockOutlined className="text-gray-400" />}
                placeholder="请输入密码"
                className="rounded-lg"
              />
            </Form.Item>

            <Form.Item className="mb-0">
              <Button
                type="primary"
                htmlType="submit"
                className="w-full rounded-lg h-12 bg-purple-600 hover:bg-purple-700"
                style={{ backgroundColor: '#7D33FF' }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Content>
    </Layout>
  );
};

export default Login;
